<template>
  <div class="basicinfo_index">
    <div class="content inner">
      <steps :step="1" :revise="isEditInfos" :editTitle="editTitle"></steps>
      <div class="reporting-main module">
        <div class="hd">
          <div class="alert-title">
            【入学类型：<span>{{ alertTitle }}</span
            >】 如果入学类型错误，请注销账号后重新注册报名
          </div>
        </div>
        <div class="bd">
          <el-form
            :inline="true"
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="155px"
            class="demo-ruleForm"
          >
            <!-- 学生信息 -->
            <div class="reporting-list">
              <div class="list-hd">
                <h3 class="title">学生信息</h3>
              </div>
              <div class="list-bd">
                <!-- 是否有户口 -->
                <el-form-item
                  label="是否有户口："
                  prop="ogState"
                  style="width: calc(50% - 10px)"
                >
                  <el-select
                    v-model="stuList.ogState"
                    placeholder="请选择"
                    style="width: 100%"
                    disabled
                  >
                    <el-option label="有户口" value="1"></el-option>
                    <el-option label="无户口" value="0"></el-option>
                  </el-select>
                </el-form-item>
                <!-- 学生姓名 -->
                <el-form-item
                  label="学生姓名："
                  prop="name"
                  style="width: calc(50% - 10px)"
                >
                  <el-input
                    v-model.trim="ruleForm.name"
                    placeholder="请输入学生姓名"
                  >
                  </el-input>
                </el-form-item>
                <!-- 身份证号 -->
                <el-form-item
                  :label="
                    ruleForm.regType == 'reg10'
                      ? '身份证号/证件号：'
                      : '身份证号：'
                  "
                  prop="idno"
                  style="width: calc(50% - 10px)"
                >
                  <el-input v-model="ruleForm.idno" disabled> </el-input>
                </el-form-item>
                <!-- 出生日期 -->
                <el-form-item
                  label="出生日期："
                  prop="birth"
                  style="width: calc(50% - 10px)"
                >
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="ruleForm.birth"
                    style="width: 100%"
                    disabled
                  ></el-date-picker>
                </el-form-item>
                <!-- 性别 -->
                <el-form-item
                  label="性别："
                  prop="gender"
                  style="width: calc(50% - 10px)"
                >
                  <el-input v-model="ruleForm.gender" disabled> </el-input>
                </el-form-item>
                <!-- 登录密码 -->
                <el-form-item
                  label="登录密码："
                  prop="pwd"
                  style="width: calc(50% - 10px)"
                >
                  <el-input
                    v-model="ruleForm.pwd"
                    placeholder="请输入密码"
                    show-password
                  ></el-input>
                </el-form-item>
                <!-- 户籍类型 -->
                <el-form-item
                  label="户籍类型："
                  prop="ogType"
                  style="width: calc(50% - 10px)"
                >
                  <el-select
                    v-model="ruleForm.ogType"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option label="非农户口" value="非农户口"></el-option>
                    <el-option label="农业户口" value="农业户口"></el-option>
                  </el-select>
                </el-form-item>
                <!-- 民族 -->
                <el-form-item
                  label="民族："
                  prop="nation"
                  style="width: calc(50% - 10px)"
                >
                  <el-select
                    v-model="ruleForm.nation"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      :label="item.name"
                      :value="item.name"
                      v-for="(item, index) in nations"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <!-- 手机号 -->
                <el-form-item
                  label="手机号："
                  prop="phone"
                  style="width: calc(50% - 10px)"
                >
                  <el-input
                    v-model="ruleForm.phone"
                    placeholder="请输入联系电话"
                  >
                  </el-input>
                  <!-- <p class="notice">接收短信使用</p> -->
                </el-form-item>
                <!-- 健康状况 -->
                <el-form-item
                  label="健康状况："
                  prop="healthType"
                  style="width: calc(50% - 10px)"
                >
                  <el-select
                    v-model="ruleForm.healthType"
                    placeholder="请选择"
                    style="width: 100%"
                    @change="healthTypeChange"
                  >
                    <el-option label="良好" value="良好"></el-option>
                    <el-option label="残疾" value="残疾"></el-option>
                  </el-select>
                </el-form-item>
                <!-- 残疾类型 -->
                <el-form-item
                  label="残疾类型："
                  prop="disableType"
                  style="width: calc(50% - 10px)"
                >
                  <el-select
                    v-model="ruleForm.disableType"
                    placeholder="请选择"
                    style="width: 100%"
                    :disabled="ruleForm.healthType != '残疾'"
                    @change="changeDisableType"
                  >
                    <el-option label="视力残疾" value="1"></el-option>
                    <el-option label="听力残疾" value="2"></el-option>
                    <el-option label="智力残疾" value="3"></el-option>
                    <el-option label="其他" value="4"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <!-- 入学信息 -->
            <div class="reporting-list">
              <div class="list-hd">
                <h3 class="title">入学信息</h3>
              </div>
              <div class="list-bd">
                <!-- 入学类型 -->
                <el-form-item
                  label="入学类型："
                  prop="regType"
                  style="width: calc(50% - 10px)"
                >
                  <el-select
                    v-model="ruleForm.regType"
                    placeholder="请选择"
                    style="width: 100%"
                    disabled
                  >
                    <el-option
                      v-for="item in regTypesArr"
                      :key="item.id"
                      :label="item.text"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <!-- 实际居住产权类型 -->
                <el-form-item
                  label="实际居住产权类型："
                  prop="houseType"
                  style="width: calc(50% - 10px); display: block"
                >
                  <el-select
                    v-model="ruleForm.houseType"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option label="父母或本人产权" value="1"></el-option>
                    <el-option label="（外）祖父母产权" value="2"></el-option>
                    <el-option label="租住房" value="3"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  class="domicile"
                  label="当前居住地址："
                  prop="ogAddress"
                  style="width: calc(100% - 10px)"
                  v-if="ruleForm.regType == 'reg1'"
                >
                  <template>
                    <el-cascader
                      size="large"
                      :options="options"
                      v-model="selectedOptions"
                      @change="handleChange"
                      style="width: 38%"
                    >
                    </el-cascader>
                    <el-input
                      v-model.trim="ruleForm.ogAddress"
                      style="width: 59%"
                      placeholder="请输入详细地址"
                    >
                    </el-input>
                  </template>
                </el-form-item>
                <!-- 户籍地址/当前居住地址 -->
                <el-form-item
                  class="domicile"
                  :label="
                    ruleForm.regType == 'reg1' ? '户籍地址：' : '当前居住地址：'
                  "
                  prop="address"
                  style="width: calc(100% - 10px)"
                >
                  <el-select
                    v-model="ruleForm.regionCode"
                    filterable
                    placeholder="请选择区县"
                    style="width: 20%; margin-right: 10px"
                    @change="changeBlock"
                  >
                    <el-option
                      :label="item.regionName"
                      :value="item.regionCode"
                      v-for="(item, index) in liveBlockLists"
                      :key="index"
                    ></el-option>
                  </el-select>
                  <el-select
                    v-model="ruleForm.street"
                    filterable
                    placeholder="请选择街道"
                    style="width: 20%; margin-right: 10px"
                    @change="changeStreet"
                  >
                    <el-option
                      :label="item.regionName"
                      :value="item.regionCode"
                      v-for="(item, index) in liveStreets"
                      :key="index"
                    ></el-option>
                  </el-select>
                  <el-select
                    v-model="ruleForm.community"
                    filterable
                    placeholder="请选择小区"
                    style="width: 21%; margin-right: 10px"
                  >
                    <el-option
                      :label="item.regionName"
                      :value="item.regionCode"
                      v-for="(item, index) in liveCommunitys"
                      :key="index"
                    ></el-option>
                  </el-select>
                  <el-input
                    v-model.trim="ruleForm.address"
                    style="width: 34%"
                    placeholder="楼栋-单元-房号，1-2-302"
                  >
                  </el-input>
                </el-form-item>
                <!-- 当前居住地址/户籍地址 -->
                <el-form-item
                  v-if="ruleForm.regType != 'reg1'"
                  class="domicile"
                  label="户籍地址："
                  :prop="
                    ruleForm.regType == 'reg10' ? 'foreignAddress' : 'ogAddress'
                  "
                  style="width: calc(100% - 10px)"
                >
                  <el-input
                    v-if="ruleForm.regType == 'reg10'"
                    v-model.trim="ruleForm.foreignAddress"
                    style="width: 98%"
                    placeholder="请输入详细地址"
                  >
                  </el-input>
                  <template v-else>
                    <el-cascader
                      size="large"
                      :options="options"
                      v-model="selectedOptions"
                      @change="handleChange"
                      style="width: 39%; margin-right: 10px"
                    >
                    </el-cascader>
                    <el-input
                      v-model.trim="ruleForm.ogAddress"
                      style="width: 59%"
                      placeholder="请输入详细地址"
                    >
                    </el-input>
                  </template>
                </el-form-item>
                <!-- 监护人工作单位 -->
                <el-row v-if="ruleForm.regType == 'reg9'">
                  <el-form-item
                    label="监护人工作单位："
                    prop="parWork"
                    style="width: calc(50% - 10px)"
                  >
                    <el-input
                      v-model.trim="ruleForm.parWork"
                      placeholder="请输入工作单位"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item
                    label="工作单位电话："
                    prop="parWorkTel"
                    style="width: calc(50% - 10px); margin-bottom: 0"
                  >
                    <el-input
                      v-model.trim="ruleForm.parWorkTel"
                      placeholder="请输入工作单位电话"
                      @blur="showWorkTelError"
                    >
                    </el-input>
                    <p class="el-form-infos" v-if="isShowWorkTelError">
                      请填写单位座机，不要填写手机号
                    </p>
                  </el-form-item>
                </el-row>
                <!-- 意向学校 -->
                <el-row v-if="ruleForm.regType == 'reg9'">
                  <el-form-item
                    label="意向学校1："
                    style="width: calc(50% - 10px)"
                    prop="wishSchool1"
                  >
                    <el-select
                      v-model="ruleForm.wishSchool1"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in wishSchools"
                        :key="item.id"
                        :label="item.schoolName"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="意向学校2："
                    style="width: calc(50% - 10px)"
                    prop="wishSchool2"
                  >
                    <el-select
                      v-model="ruleForm.wishSchool2"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in wishSchools"
                        :key="item.id"
                        :label="item.schoolName"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="意向学校3："
                    style="width: calc(50% - 10px)"
                    prop="wishSchool3"
                  >
                    <el-select
                      v-model="ruleForm.wishSchool3"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in wishSchools"
                        :key="item.id"
                        :label="item.schoolName"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-row>
              </div>
            </div>
            <!-- 其他信息 -->
            <div class="reporting-list" v-if="oilShow == '1'">
              <div class="list-hd">
                <h3 class="title">其他信息</h3>
              </div>
              <div class="list-bd">
                <el-form-item
                  label="石油系统子女："
                  style="width: calc(50% - 10px)"
                >
                  <el-select
                    v-model="ruleForm.oilType"
                    placeholder="请选择"
                    style="width: 100%"
                    @change="changeOilType"
                    clearable
                  >
                    <el-option label="油田本部" value="油田本部"></el-option>
                    <el-option label="塔石化" value="塔石化"></el-option>
                    <el-option
                      label="乙烷制乙烯"
                      value="乙烷制乙烯"
                    ></el-option>
                    <el-option label="物探三处" value="物探三处"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                  </el-select>
                  <p class="el-form-infos">
                    石油系统子女选择，其他人请不要选择
                  </p>
                </el-form-item>
                <el-form-item
                  label="选择学校："
                  prop=""
                  style="width: calc(50% - 10px)"
                  :class="{ oilschool: isSchool }"
                >
                  <el-select
                    v-model="ruleForm.oilSchool"
                    placeholder="请选择"
                    style="width: 100%"
                    :disabled="!ruleForm.oilType"
                    @change="changeOilSchool(ruleForm.oilSchool)"
                  >
                    <el-option
                      v-for="item in oilSchoolLists"
                      :key="item.id"
                      :label="item.schoolName"
                      :value="item.id"
                    ></el-option> </el-select
                ></el-form-item>
              </div>
            </div>
            <!-- 监护人信息 -->
            <div class="reporting-list">
              <div class="list-hd">
                <h3 class="title">监护人信息</h3>
              </div>
              <div class="list-bd">
                <!-- 监护人1 -->
                <el-form-item
                  label="监护人1姓名："
                  prop="parName"
                  style="width: calc(50% - 10px)"
                >
                  <el-input
                    v-model.trim="ruleForm.parName"
                    placeholder="请输入名字"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item
                  :label="
                    ruleForm.regType == 'reg10' || ruleForm.regType == 'reg9'
                      ? '监护人1证件号：'
                      : '监护人1身份证号：'
                  "
                  prop="parIdno"
                  style="width: calc(50% - 10px)"
                >
                  <el-input
                    v-model.trim="ruleForm.parIdno"
                    :placeholder="
                      ruleForm.regType == 'reg10' || ruleForm.regType == 'reg9'
                        ? '请输入身份证号/证件号'
                        : '请输入身份证号'
                    "
                  >
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="监护人1手机号："
                  prop="parPhone"
                  style="width: calc(50% - 10px)"
                >
                  <el-input
                    v-model="ruleForm.parPhone"
                    placeholder="请输入手机号"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="监护人1与生源关系："
                  prop="parRlat"
                  style="width: calc(50% - 10px)"
                >
                  <el-select
                    v-model="ruleForm.parRlat"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <!-- <el-option label="请选择" value=""></el-option> -->
                    <el-option
                      label="父子（父女）"
                      value="父子（父女）"
                    ></el-option>
                    <el-option
                      label="母子（母女）"
                      value="母子（母女）"
                    ></el-option>
                    <el-option label="祖孙" value="祖孙"></el-option>
                    <el-option label="领养" value="领养"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                  </el-select>
                </el-form-item>
                <!-- 监护人2 -->
                <el-form-item
                  label="监护人2姓名："
                  style="width: calc(50% - 10px)"
                  prop="parName2"
                >
                  <el-input
                    v-model.trim="ruleForm.parName2"
                    placeholder="请输入名字"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item
                  :label="
                    ruleForm.regType == 'reg10' || ruleForm.regType == 'reg9'
                      ? '监护人2证件号：'
                      : '监护人2身份证号：'
                  "
                  style="width: calc(50% - 10px)"
                  prop="parIdno2"
                >
                  <el-input
                    v-model.trim="ruleForm.parIdno2"
                    :placeholder="
                      ruleForm.regType == 'reg10' || ruleForm.regType == 'reg9'
                        ? '请输入身份证号/证件号'
                        : '请输入身份证号'
                    "
                  >
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="监护人2手机号："
                  style="width: calc(50% - 10px)"
                  prop="parPhone2"
                >
                  <el-input
                    v-model="ruleForm.parPhone2"
                    placeholder="请输入手机号"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="监护人2与生源关系："
                  prop="parRlat2"
                  style="width: calc(50% - 10px)"
                >
                  <el-select
                    v-model="ruleForm.parRlat2"
                    placeholder="请选择"
                    style="width: 100%"
                    clearable
                  >
                    <!-- <el-option label="请选择" value=""></el-option> -->
                    <el-option
                      label="父子（父女）"
                      value="父子（父女）"
                    ></el-option>
                    <el-option
                      label="母子（母女）"
                      value="母子（母女）"
                    ></el-option>
                    <el-option label="祖孙" value="祖孙"></el-option>
                    <el-option label="领养" value="领养"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  style="
                    width: calc(100% - 10px);
                    margin-top: 14px;
                    margin-bottom: 20px;
                  "
                  class="reporting-btn"
                  v-if="verify.res != -1"
                >
                  <el-button
                    type="primary"
                    size="small"
                    @click="submitForm('ruleForm')"
                    >{{ isEditInfos ? "确认修改" : "下一步" }}</el-button
                  >
                </el-form-item>
                <div class="no-edit" v-else>
                  <i class="el-icon-warning warning"></i>{{ verify.msg }}
                </div>
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Steps from "../components/Steps";
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
// import { getAnalysisIdCard } from "../utils/util";
import { formatDate } from "../utils/util";
import {
  getVerify,
  getSysCode,
  getSchoolByBlock,
  getStreet,
  getCommunity,
  getStudInfo,
  submitStudInfo,
} from "../utils/api";
import localDb from "../utils/localDb";

export default {
  name: "Basicinfo",
  components: {
    Steps,
  },
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入手机号"));
      } else if (/^1[34578]\d{9}$/.test(value) == false) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };

    return {
      ruleForm: {
        ogState: "", //是否有户口
        name: "", //学生姓名
        idno: "", //学生身份证
        birth: "", //出生日期
        gender: "", //性别
        pwd: "", //登录密码
        ogType: "", //户籍类型
        nation: "", //民族
        phone: "", //手机号码
        healthType: "", //健康状况
        disableType: "", //残疾类型
        regType: "", //入学类型
        houseType: "", //实际居住产权类型

        regionCode: "", // 户籍区县/居住区县
        street: "", //户籍街道/居住街道
        community: "", //户籍小区/居住小区
        address: "", //户籍详细地址/居住详细地址
        ogRegion: "", //户籍所在省市区县
        ogAddress: "", // 户籍所在详细地址
        foreignAddress: "", //外籍户籍地址

        wishSchool1: "", // 意向学校1
        wishSchool2: "",
        wishSchool3: "",
        oilType: "", //是否是石油系统子女
        oilSchool: null, //石油系统子女所选学校
        parName: "", //监护人1姓名
        parIdno: "", //监护人1身份证号
        parPhone: "", //监护人1联系电话
        parRlat: "", //监护人1生源关系
        parWork: "", //工作单位
        parWorkTel: "", //工作单位电话
        parName2: "", //监护人2姓名
        parIdno2: "", //监护人2身份证号
        parPhone2: "", //监护人2联系电话
        parRlat2: "", //监护人2生源关系
      },
      rules: {
        name: [
          { required: true, message: "请输入真实的学生姓名", trigger: "blur" },
          {
            pattern: /(^.{1,100}$)/,
            message: "输入长度在100以内",
          },
        ],
        idno: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: "你的身份证格式不正确",
          },
        ],
        phone: [
          {
            required: true,
            validator: validatePhone,
            trigger: "blur",
          },
        ],
        ogType: [
          { required: true, message: "请选择户籍类型", trigger: "change" },
        ],
        pwd: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            pattern: /(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,20}$/,
            message: "密码格式不正确,由6-20位数字或字母或特殊字符中的两种组成",
          },
        ],
        nation: [{ required: true, message: "请选择民族", trigger: "change" }],
        healthType: [
          { required: true, message: "请选择健康状况", trigger: "change" },
        ],
        address: [
          {
            required: true,
            message: "请输入详细地址",
            trigger: "blur",
          },
          {
            pattern: /(^.{1,100}$)/,
            message: "输入长度在100以内",
          },
        ],
        parPhone: [
          {
            required: true,
            trigger: "blur",
            validator: validatePhone,
          },
        ],
        ogAddress: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
          {
            pattern: /(^.{1,100}$)/,
            message: "输入长度在100以内",
          },
        ],
        foreignAddress: [
          {
            required: true,
            message: "请输入外籍户口详细地址",
            trigger: "blur",
          },
          {
            pattern: /(^.{1,100}$)/,
            message: "输入长度在100以内",
          },
        ],
        parName: [
          { required: true, message: "请输入监护人1的姓名", trigger: "blur" },
          {
            pattern: /(^.{1,100}$)/,
            message: "输入长度在100以内",
          },
        ],
        parIdno: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: "你的身份证格式不正确",
          },
        ],
        parName2: [
          {
            pattern: /(^.{1,100}$)/,
            message: "输入长度在100以内",
          },
        ],
        parIdno2: [
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: "你的身份证格式不正确",
          },
        ],
        parPhone2: [
          {
            pattern: /^1[34578]\d{9}$/,
            message: "请输入正确的手机号",
          },
        ],
        parRlat: [
          { required: true, message: "请输入生源关系", trigger: "blur" },
        ],
        parWork: [
          { required: true, message: "请输入工作单位", trigger: "blur" },
          {
            pattern: /(^.{1,100}$)/,
            message: "输入长度在100以内",
          },
        ],
        parWorkTel: [
          { required: true, message: "请输入工作单位电话", trigger: "blur" },
          {
            pattern: /(^.{1,100}$)/,
            message: "输入长度在100以内",
          },
        ],
        houseType: [{ required: true, message: "请选择", trigger: "change" }],
        wishSchool1: [
          { required: true, message: "请选择意向学校", trigger: "change" },
        ],
        wishSchool2: [
          { required: true, message: "请选择意向学校", trigger: "change" },
        ],
        wishSchool3: [
          { required: true, message: "请选择意向学校", trigger: "change" },
        ],
      },
      options: regionData,
      selectedOptions: [],
      isEditInfos: false, //是否是修改页面
      editTitle: "", //编辑页面标题
      stuList: [],
      nations: [
        { id: 1, name: "汉族" },
        { id: 2, name: "蒙古族" },
        { id: 3, name: "回族" },
        { id: 4, name: "藏族" },
        { id: 5, name: "维吾尔族" },
        { id: 6, name: "苗族" },
        { id: 7, name: "彝族" },
        { id: 8, name: "壮族" },
        { id: 9, name: "布依族" },
        { id: 10, name: "朝鲜族" },
        { id: 11, name: "满族" },
        { id: 12, name: "侗族" },
        { id: 13, name: "瑶族" },
        { id: 14, name: "白族" },
        { id: 15, name: "土家族" },
        { id: 16, name: "哈尼族" },
        { id: 17, name: "哈萨克族" },
        { id: 18, name: "傣族" },
        { id: 19, name: "黎族" },
        { id: 20, name: "傈僳族" },
        { id: 21, name: "佤族" },
        { id: 22, name: "畲族" },
        { id: 23, name: "高山族" },
        { id: 24, name: "拉祜族" },
        { id: 25, name: "水族" },
        { id: 26, name: "东乡族" },
        { id: 27, name: "纳西族" },
        { id: 28, name: "景颇族" },
        { id: 29, name: "柯尔克孜族" },
        { id: 30, name: "土族" },
        { id: 31, name: "达翰尔族" },
        { id: 32, name: "么佬族" },
        { id: 33, name: "羌族" },
        { id: 34, name: "布朗族" },
        { id: 35, name: "撒拉族" },
        { id: 36, name: "毛南族" },
        { id: 37, name: "仡佬族" },
        { id: 38, name: "锡伯族" },
        { id: 39, name: "阿昌族" },
        { id: 40, name: "普米族" },
        { id: 41, name: "塔吉克族" },
        { id: 42, name: "怒族" },
        { id: 43, name: "乌孜别克族" },
        { id: 44, name: "俄罗斯族" },
        { id: 45, name: "鄂温克族" },
        { id: 46, name: "德昂族" },
        { id: 47, name: "保安族" },
        { id: 48, name: "裕固族" },
        { id: 49, name: "京族" },
        { id: 50, name: "塔塔尔族" },
        { id: 51, name: "独龙族" },
        { id: 52, name: "鄂伦春族" },
        { id: 53, name: "赫哲族" },
        { id: 54, name: "门巴族" },
        { id: 55, name: "珞巴族" },
        { id: 56, name: "基诺族" },
      ], //民族
      liveBlockLists: [], //区县
      liveStreets: [], //街道
      liveCommunitys: [], //小区
      oilSchoolList: [], // 石油系统子女学校列表
      isSubmit: true, //是否可以提交
      regTypesArr: [], //所有的入学类型
      alertTitle: "",
      wishSchools: [], // 所有的意向学校
      isSchool: false,
      oilShow: "", //是否显示石油..
      isShowWorkTelError: true,
    };
  },
  computed: {
    verify() {
      return this.$store.state.verify;
    },
    oilSchoolLists() {
      const arr = [];
      if (
        this.ruleForm.oilType == "物探三处" ||
        this.ruleForm.oilType == "其他"
      ) {
        this.oilSchoolList.forEach((item) => {
          if (item.id == 8) {
            arr.push(item);
          }
        });
        return arr;
      } else {
        return this.oilSchoolList;
      }
    },
  },
  methods: {
    submitForm(formName) {
      // this.ruleForm.regType = Number(this.ruleForm.regType);
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.ruleForm.regionCode == "") {
            this.$message.error("请选择区县");
            return false;
          }
          if (this.ruleForm.street == "") {
            this.$message.error("请选择街道");
            return false;
          }
          if (this.ruleForm.community == "") {
            this.$message.error("请选择小区");
            return false;
          }
          if (this.ruleForm.regType != "reg10") {
            if (this.ruleForm.ogRegion == "") {
              this.$message.error("请选择户籍省市区");
              return false;
            }
          }
          if (this.ruleForm.healthType == "残疾") {
            if (this.ruleForm.disableType == "") {
              this.$message.error("请选择残疾类型");
              return false;
            }
          }
          if (this.ruleForm.oilType) {
            if (this.ruleForm.oilSchool == 0) {
              this.$message.error("请选择石油学校");
              return false;
            }
          }
          if (!this.isSubmit) {
            this.$message.error("请勿重复提交");
            return false;
          }
          let params = this.ruleForm;
          params.birth = this.formatDateTime("YY-MM-dd", this.ruleForm.birth);
          // params.oilSchool = Number(this.ruleForm.oilSchool);
          // if (this.ruleForm.oilSchool == 0) {
          //   this.isSchool = true;
          // }
          try {
            const data = await submitStudInfo(params);
            if (data.res == 0) {
              if (this.isEditInfos) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                  duration: 1500,
                });
                setTimeout(() => {
                  this.$router.push({ path: "/results" });
                }, 1500);
              } else {
                this.$router.push({ path: "/signup" });
              }
            } else {
              this.$message.error(data.msg);
            }
          } catch (error) {}
        } else {
          this.isShowWorkTelError = false;
          this.$message.error("请填写完整信息");
          return false;
        }
        this.isSubmit = false;
        setTimeout(() => {
          this.isSubmit = true;
        }, 3000);
      });
      // this.$router.push("/signup");
    },
    formatDateTime(fmt, mydate) {
      return formatDate(fmt, mydate);
    },
    // 选中的省市区县
    handleChange() {
      var loc = "";
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]];
      }
      this.ruleForm.ogRegion =
        CodeToText[this.selectedOptions[0]] +
        "/" +
        CodeToText[this.selectedOptions[1]] +
        "/" +
        CodeToText[this.selectedOptions[2]];
    },
    //健康状况改变
    healthTypeChange(value) {
      if (value == "良好") {
        this.ruleForm.disableType = "";
      }
    },
    //选中的残疾类型
    changeDisableType(val) {
      switch (val) {
        case "1":
          this.ruleForm.disableType = "视力残疾";
          break;
        case "2":
          this.ruleForm.disableType = "听力残疾";
          break;
        case "3":
          this.ruleForm.disableType = "智力残疾";
          break;
        case "4":
          this.ruleForm.disableType = "其他";
          break;
        default:
          break;
      }
    },
    // 选中的石油系统
    changeOilType(val) {
      this.ruleForm.oilSchool = null;
    },
    // 选中的石油学校
    changeOilSchool(val) {
      if (val != 0) {
        this.isSchool = false;
      }
    },
    //获取学生信息数据
    async getStuList() {
      try {
        const data = await getStudInfo();
        if (data.res == 0) {
          this.stuList = data.data.person;
          this.$store.dispatch("setStuList", data.data.person);
          this.liveBlockLists = data.data.regionBlockList;
          this.oilSchoolList = data.data.oilSchoolList;
          this.oilShow = data.data.oilShow;

          // this.ruleForm = this.stuList;
          this.ruleForm.ogState = this.stuList.ogState;
          this.ruleForm.name = this.stuList.name;
          this.ruleForm.idno = this.stuList.idno;
          this.ruleForm.birth = new Date(this.stuList.birth);
          this.ruleForm.gender = this.stuList.gender;
          this.ruleForm.pwd = this.stuList.pwd;
          this.ruleForm.ogType = this.stuList.ogType || "";
          this.ruleForm.nation = this.stuList.nation || "";
          this.ruleForm.phone = this.stuList.phone;
          this.ruleForm.healthType = this.stuList.healthType || "";
          this.ruleForm.disableType = this.stuList.disableType || "";
          this.ruleForm.regType = this.stuList.regType;
          this.ruleForm.houseType = this.stuList.houseType || "";
          this.ruleForm.regionCode = this.stuList.regionCode || "";
          this.ruleForm.street = this.stuList.street || "";
          this.ruleForm.community = this.stuList.community || "";
          this.ruleForm.address = this.stuList.address || "";
          this.ruleForm.foreignAddress = this.stuList.foreignAddress || "";
          this.ruleForm.ogRegion = this.stuList.ogRegion || "";
          this.ruleForm.ogAddress = this.stuList.ogAddress || "";
          this.ruleForm.oilType = this.stuList.oilType || "";
          this.ruleForm.oilSchool = this.stuList.oilSchool || null;
          this.ruleForm.parName = this.stuList.parName || "";
          this.ruleForm.parName2 = this.stuList.parName2 || "";
          this.ruleForm.parIdno = this.stuList.parIdno || "";
          this.ruleForm.parIdno2 = this.stuList.parIdno2 || "";
          this.ruleForm.parPhone = this.stuList.parPhone || "";
          this.ruleForm.parPhone2 = this.stuList.parPhone2 || "";
          this.ruleForm.parRlat = this.stuList.parRlat || "";
          this.ruleForm.parRlat2 = this.stuList.parRlat2 || "";
          this.ruleForm.parWork = this.stuList.parWork || "";
          this.ruleForm.parWorkTel = this.stuList.parWorkTel || "";
          this.ruleForm.wishSchool1 = this.stuList.wishSchool1;
          this.ruleForm.wishSchool2 = this.stuList.wishSchool2;
          this.ruleForm.wishSchool3 = this.stuList.wishSchool3;

          // this.oilSchoolList.unshift({ id: 0, schoolName: "请选择" });
          // if (this.ruleForm.oilSchool == 0) {
          //   this.isSchool = true;
          // }

          const idNo = [
            {
              required: true,
              message: "请输入身份证号/证件号",
              trigger: "blur",
            },
            {
              pattern: /(^.{1,100}$)/,
              message: "输入长度在100以内",
            },
            {
              pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
              message: "您的身份证格式不正确",
            },
          ];

          if (
            this.ruleForm.regType == "reg10" ||
            this.ruleForm.regType == "reg9"
          ) {
            this.rules.parIdno = [];
            this.rules.parIdno2 = [];
            this.rules.idno = [];
            this.rules.parIdno.push(idNo[0]);
            this.rules.idno.push(idNo[0]);
            this.rules.parIdno.push(idNo[1]);
            this.rules.idno.push(idNo[1]);
            this.rules.parIdno2.push(idNo[1]);
          } else {
            this.rules.parIdno = idNo;
            this.rules.idno = idNo;
          }

          // 回填区县对应的街道 / 意向学校
          if (this.stuList.ogRegion) {
            try {
              const data = await getStreet(this.stuList.ogRegion);
              if (data.res == 0) {
                this.liveStreets = data.data;
                this.ruleForm.street = this.stuList.street;
              } else {
                this.$message.error(data.msg);
              }
            } catch (error) {}
            try {
              const data = await getSchoolByBlock(this.stuList.regionCode);
              if (data.res == 0) {
                this.wishSchools = data.data;
              } else {
                this.$message.error(data.msg);
              }
            } catch (error) {}
          }
          //回填街道对应的小区
          if (this.stuList.street) {
            try {
              const data = await getCommunity(this.stuList.street);
              if (data.res == 0) {
                this.liveCommunitys = data.data;
                this.ruleForm.community = this.stuList.community;
              } else {
                this.$message.error(data.msg);
              }
            } catch (error) {}
          }
          // 警告框的入学类型
          this.regTypesArr.forEach((item) => {
            if (item.code == this.ruleForm.regType) {
              this.alertTitle = item.text;
            }
          });

          //省市区字符串转换
          this.selectedOptions = [];
          if (this.stuList.ogRegion) {
            let address = this.stuList.ogRegion.split("/");
            if (
              address[0] == "北京市" ||
              address[0] == "天津市" ||
              address[0] == "上海市" ||
              address[0] == "重庆市"
            ) {
              address[1] = "市辖区";
            }

            // 省份
            this.selectedOptions.push(TextToCode[address[0]].code);
            // 城市
            let cityCode = TextToCode[address[0]][address[1]].code;
            this.selectedOptions.push(cityCode);
            // 地区
            let areaCode = TextToCode[address[0]][address[1]][address[2]].code;
            this.selectedOptions.push(areaCode);
          }
        } else {
          this.$message.error(data.msg);
        }
      } catch (error) {}
    },
    // 获取所有的入学类型
    async getRegType(type) {
      try {
        const data = await getSysCode(type);
        if (data.res == 0) {
          this.regTypesArr = data.data;
        }
      } catch (error) {}
    },
    //获取当前居住区县下的街道 / 意向学校
    async changeBlock(val) {
      try {
        const data = await getStreet(val);
        if (data.res == 0) {
          this.liveStreets = data.data;
          this.ruleForm.street = "";
          this.ruleForm.community = "";
          this.liveCommunitys.length = 0;
          this.ruleForm.address = "";
        } else {
          this.$message.error(data.msg);
        }
      } catch (error) {}
      try {
        const data = await getSchoolByBlock(val);
        if (data.res == 0) {
          this.wishSchools = data.data;
        } else {
          this.$message.error(data.msg);
        }
      } catch (error) {}
    },
    //获取当前居住地街道下的小区
    async changeStreet(val) {
      try {
        const data = await getCommunity(val);
        if (data.res == 0) {
          this.liveCommunitys = data.data;
          this.ruleForm.community = "";
          this.ruleForm.address = "";
        } else {
          this.$message.error(data.msg);
        }
      } catch (error) {}
    },
    // 判断学生是否可修改信息、注销
    async getVerify() {
      try {
        const data = await getVerify();
        localDb.set("verify", data);
      } catch (error) {}
    },
    showWorkTelError() {
      this.$refs["ruleForm"].validateField("parWorkTel", (parWorkTelError) => {
        if (parWorkTelError) {
          this.isShowWorkTelError = false;
        } else {
          this.isShowWorkTelError = true;
        }
      });
    },
  },
  created() {
    this.getVerify();
    this.getRegType("regType1");
    //判断是不是修改页面
    if (this.$route.query.isEditInfos) {
      this.isEditInfos = true;
      this.editTitle = this.$route.query.isEditInfos;
    } else {
      this.isEditInfos = false;
    }
  },
  mounted() {
    this.getStuList();
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.warning {
  margin-top: 10px;
  font-size: 16px;
  .el-icon-warning {
    margin: -3px 12px 0 0;
    color: $bsC;
    font-size: 30px;
    vertical-align: middle;
  }
}
.basicinfo_index {
  // background-color: #edf4fa;
  height: 100%;
  //   overflow: auto;
  padding-top: 30px;
  .content {
    padding-bottom: 30px;
  }
}
.reporting-main {
  padding: 20px;
  padding-bottom: 10px;
  .bd {
    .reporting-list {
      .list-hd {
        position: relative;
        h3 {
          //   border-left: 3px solid #0195ff;
          font-size: 16px;
          color: #222;
          background: none;
          padding-left: 8px;
        }
        &::before {
          content: "";
          width: 3px;
          height: 17px;
          background-color: #0195ff;
          position: absolute;
          top: 5px;
          left: 0;
        }
      }
      .list-bd {
        .el-form-item {
          margin-bottom: 12px;
          .el-form-item__content {
            .el-cascader {
              margin-right: 10px !important;
            }
          }
          /deep/ .el-form-item__error {
            padding-left: 15px;
            top: 95%;
            padding-top: 1px;
          }
          .el-form-infos {
            padding-left: 15px;
            padding-bottom: 0;
            padding-top: 0;
            line-height: 12px;
          }
        }
        .oilschool {
          /deep/ .el-form-item__content {
            /deep/ .el-input__inner {
              color: #ccc;
            }
          }
        }
        .house {
          display: block;
          width: 100%;
          /deep/ .el-form-item__content {
            width: 85%;
          }
          .el-select {
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.demo-ruleForm {
  .el-form-item__label {
    padding-right: 0;
  }
}
.el-form--inline .el-form-item__content {
  width: 65%;
}
.el-form--inline .domicile .el-form-item__content {
  width: 84%;
}
.el-form--inline {
  .reporting-btn {
    .el-form-item__content {
      width: 100%;
      text-align: center;
    }
  }
}
</style>
